<template>
  <div class="order-list">
    <div class="search">
      <el-form :model="form" ref="ruleFormRef" label-width="auto">
        <el-row :gutter="0" style="margin-bottom: 10px">
          <el-col :span="6">
            <el-form-item label="订单号:">
              <el-input
                v-model="form.orderNo"
                style="width: 80%"
                placeholder="请输入订单号"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="搜索学员">
              <el-input
                v-model="form.studentName"
                style="width: 80%"
                placeholder="请输入学员姓名"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="购买项目">
              <el-select
                v-model="form.courseId"
                placeholder="请输入项目名称"
                style="width: 80%"
                clearable
              >
                <el-option
                  v-for="item in lessonList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" icon="Search" @click="toSearch"
              >搜索</el-button
            >
            <el-button icon="Refresh" @click="resetQuery()">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div style="margin-left: 10px">
      <router-link :to="'/registrar/studentsSignUp/index/'" class="link-type">
        <el-button
          style="margin-right: 30px"
          type="primary"
          v-hasPermi="['financial:order:option']"
          >报名/续费</el-button
        >
      </router-link>
      <router-link
        :to="'/financial/orderManage/transform_course'"
        class="link-type"
      >
        <el-button
          style="margin-right: 30px"
          type="primary"
          v-hasPermi="['financial:order:option']"
          >转课</el-button
        >
      </router-link>
      <router-link
        :to="'/financial/orderManage/refund_course'"
        class="link-type"
      >
        <el-button type="primary" v-hasPermi="['financial:order:option']"
          >退课</el-button
        >
      </router-link>
      <!-- <el-button plain @click="handleExport" style="margin-left: 30px"
        >导出</el-button
      > -->
    </div>
    <div class="dialog-warning">
      <span>实收总计(元) : </span
      ><span style="font-weight: bolder; margin: 0 20px 0 10px"
        >¥{{ sumAmount }}</span
      >
    </div>

    <div class="table">
      <!-- 表格 -->
      <div class="students-table">
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          v-loading="loading"
        >
          <el-table-column
            label="订单号"
            fixed="left"
            show-overflow-tooltip
            :formatter="formatName"
            width="180"
          >
            <template #default="scope">
              <router-link
                :to="'/financial/orderManage/details/' + scope.row.id"
                class="link-type"
              >
                <span style="color: #67c23a; cursor: pointer">{{
                  scope.row.orderNo
                }}</span>
              </router-link>
            </template>
          </el-table-column>
          <el-table-column
            property="studentName"
            label="学员姓名"
            fixed="left"
            show-overflow-tooltip
            :formatter="formatName"
            width="130"
          />
          <el-table-column
            property="mobile"
            label="手机号"
            show-overflow-tooltip
            :formatter="formatName"
            width="130"
          />
          <el-table-column
            label="订单类型"
            show-overflow-tooltip
            :formatter="formatName"
            width="130"
          >
            <template #default="scope">
              {{ scope.row.type }}
            </template>
          </el-table-column>
          <el-table-column
            label="购买项目"
            show-overflow-tooltip
            :formatter="formatName"
            width="180"
          >
            <template #default="scope">
              {{ scope.row.courseName }}
              {{ scope.row.coursePriceName }}
            </template>
          </el-table-column>
          <el-table-column
            label="应收/应退"
            show-overflow-tooltip
            :formatter="formatName"
            width="150"
          >
            <template #default="scope"
              ><span
                v-if="scope.row.type === '退课'"
                style="
                  color: #fb6465;
                  border: 1px solid #fb6465;
                  padding: 1px;
                  font-size: 12px;
                  margin-right: 10px;
                "
                >退</span
              ><span
                v-else
                style="
                  color: #67c23a;
                  border: 1px solid #67c23a;
                  padding: 1px;
                  font-size: 12px;
                  margin-right: 10px;
                "
                >收</span
              >
              ¥ {{ scope.row.amount }}
            </template>
          </el-table-column>
          <el-table-column
            label="实收/实退"
            show-overflow-tooltip
            :formatter="formatName"
            width="150"
          >
            <template #default="scope">
              <span
                v-if="scope.row.type === '退课'"
                style="
                  color: #fb6465;
                  border: 1px solid #fb6465;
                  padding: 1px;
                  font-size: 12px;
                  margin-right: 10px;
                "
                >退</span
              ><span
                v-else
                style="
                  color: #67c23a;
                  border: 1px solid #67c23a;
                  padding: 1px;
                  font-size: 12px;
                  margin-right: 10px;
                "
                >收</span
              >¥ {{ scope.row.paidAmount }}
            </template>
          </el-table-column>
          <el-table-column
            label="业绩归属人"
            show-overflow-tooltip
            :formatter="formatName"
            width="130"
          >
            <template #default="scope">
              {{ scope.row.saler ? scope.row.saler : "-" }}
            </template>
          </el-table-column>
          <el-table-column
            property="addTime"
            label="创建时间"
            show-overflow-tooltip
            :formatter="formatName"
            width="180"
          />
          <el-table-column
            property="handlingTime"
            label="经办时间"
            show-overflow-tooltip
            :formatter="formatName"
            width="150"
          />

          <el-table-column
            property="creator"
            label="学员创建人"
            fixed="right"
            show-overflow-tooltip
            :formatter="formatName"
            width="120"
          />
          <el-table-column
            property="state"
            label="订单状态"
            show-overflow-tooltip
            :formatter="formatName"
            width="150"
            fixed="right"
          />
          <!-- <el-table-column label="操作">
            <template #default="scope">
              <el-button link type="primary" @click="handleSignUp(scope.row)">
                跟班试听
              </el-button>
            </template>
          </el-table-column> -->
        </el-table>
        <pagination
          :total="total"
          v-model:page="pageNum"
          v-model:limit="pageSize"
          @pagination="toGetOrderList"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  getOrderList,
  getSumAmount,
  getLessonList,
} from "@/api/studentManagement/index.js";
const form = ref({
  orderNo: null,
  studentName: null,
  courseId: null,
});
//搜索
const toSearch = () => {
  toGetOrderList();
  toGetSumAmount();
};
//搜索重置
const resetQuery = () => {
  form.value = {
    orderNo: null,
    studentName: null,
    courseId: null,
  };
  pageNum.value = 1;
  toGetOrderList();
  toGetSumAmount();
};
//获取课程列表
const lessonList = ref([]);
const toGetLessonList = async () => {
  try {
    const res = await getLessonList({
      pageNum: 1,
      pageSize: 9999,
    });
    if (res.code == 200) {
      lessonList.value = res.rows;
    }
  } catch (error) {
    console.error("获取课程列表失败:", error);
  }
};
onBeforeMount(toGetLessonList);
//分页器
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(10);
//获取表格数据
const loading = ref(true);
const tableData = ref([]);
const toGetOrderList = async () => {
  loading.value = true;
  const params = {
    ...form.value,
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  };
  try {
    const res = await getOrderList(params);
    if (res.code == 200) {
      total.value = res.total;
      tableData.value = res.rows;
      loading.value = false;
    }
  } catch (error) {
    console.error("获取订单列表失败:", error);
  }
};
onMounted(toGetOrderList);
//表格没有数据显示'-'
const formatName = (row, column, cellValue) => {
  return cellValue === "" || cellValue === null ? "-" : cellValue;
};
//获取实收总计
const sumAmount = ref(null);
const toGetSumAmount = async () => {
  try {
    const res = await getSumAmount({ ...form.value });
    if (res.code == 200) {
      sumAmount.value = res.data;
    }
  } catch (error) {
    console.error("获取实收总计失败:", error);
  }
};
onMounted(toGetSumAmount);
</script>

<style lang="scss" scoped>
.order-list {
  .search {
    margin-top: 30px;
  }
  .order-nav {
    display: flex;
    // justify-content: space-around;
    align-items: center;
    margin-bottom: 20px;
  }
  .dialog-warning {
    margin-bottom: 15px;
    padding: 8px 10px;
    margin: 20px 0;
    background-color: #ecf5ff;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
  }
  .table {
    // font-weight: bold;
  }
}
</style>
